<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>捕获事件应用实战案例</title>

		<style>
			dl {
				margin: 50px;
			}
			
			nav *,
			body {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			
			nav {
				position: relative;
			}
			
			section {
				position: absolute;
				left: 0px;
				right: 0px;
				height: 20px;
				overflow: hidden;
				background: blue;
				transition: 1s;
			}
			
			.sub {
				height: 120px;
			}
			
			ul {
				width: 1000px;
				height: 88px;
				margin: auto;
			}
			
			nav ul li {
				height: 66px;
				line-height: 66px;
				float: left;
				border: 1px solid red;
				padding: 10px 25px;
			}
		</style>
	</head>

	<body>
		<style type="text/css">
			header {
				width: 800px;
				margin: 2em auto;
			}
		</style>
		<header>
			<h3>使用方法：鼠标移入移出导航及子导航上观察子导航变化</h3></header>
		<nav>
			<ul id="box">
				<li><span>小米</span></li>
				<li><span>红米</span></li>
				<li><span>平板 · 笔记本</span></li>
				<li><span>电视</span></li>
				<li><span>盒子 · 影音</span></li>
				<li><span>路由器</span></li>
				<li><span>智能硬件</span></li>
				<li><span>服务</span></li>
				<li><span>社区</span></li>
			</ul>

			<section id="subnav">
				子导航
				<b>99</b>
				<div id="test">
					<b>99</b>
				</div>
			</section>

		</nav>

		<script>
			var lis = document.querySelectorAll("li")
			var subnav = document.querySelector("#subnav");
			var test = document.querySelector("#test");
			for(var i = 0; i < lis.length; i++) {
				lis[i].onmouseenter = function() {
					subnav.className = "sub"
					subnav.innerHTML = this.innerHTML;
				}

				lis[i].onmouseleave = function(ev) {
					subnav.className = ""
					subnav.addEventListener("mouseenter", function() {
						subnav.className = "sub"
					}, true)
				}
			}
			subnav.onmouseleave = function() {
				this.className = ""
			}
		</script>

		<hr />

		<style>
			footer {
				width: 800px;
				margin: 50px auto;
			}
			
			footer li {
				line-height: 2em;
			}
			
			footer b {
				display: inline-block;
				width: 6em;
				padding-right: 2em;
			}
		</style>
		<footer>

			<h2>本案例学会哪些？</h2>
			<ol>

				<li><b>学会难点</b> 捕获事件模型的应用技巧</li>

				<li><b>重点</b> onmouseenter与onmouseleave事件的理解</li>

				<li><b>常考点</b>onmouseenter 与mouseover的区别（区别是：支不支持冒泡）</li>
			</ol>

		</footer>
	</body>

</html>